<template>
  <div id="articleList">
    <app-header></app-header>
    <div class="articleList_content">      
      <div class="inputMsg"> 
        <div class="search">
            <input type="text" v-model="keywords" v-on:blur="losed()" @focus="insinte" v-bind:placeholder="bestHot">
            <router-link :to="{ path: '/search', query:{key:keywords}}">              
                <div class="magnifier" v-on:click="search(keywords)">
                    <img src="../assets/icon_ search.png" class="fangdajing">
                </div>
            </router-link>
        </div>
        <transition name="slide-fade">
            <div class="hotNews" v-show="disappeared">
                <ul>
                    <li v-for="news in hotnews" :key="news.title" class="hotList" @click="clickMe(news.title)">
                        {{news.title}}  
                    </li>                    
                </ul>
            </div>
        </transition>
      </div>   
      <div class="articleList_middle">
          <div class="left">
              <ul>
                  <li v-for="(pinyin,index) in channelname" :key="pinyin" v-on:click="getArt(pinyin)" :class="{'cgColor':changeColor ===index}">
                    <div @click="changeColor=index">{{channelpinyin[index]}}</div>
                  </li>
              </ul>
          </div>
          <div class="artlist" >
              <ul>
                  <li class="list_li" v-for="news in articledata" :key="news.title">
                      <div class="howLong">
                          <p v-html="dateDiff(news.create_time)"></p>
                          <span v-bind:title="news.source">{{news.source}}</span>
                      </div>
                      <router-link :to="{path:'/articleDetail',query:{newsId:news._id}}">
                        <h1 v-bind:title="news.title">{{news.title}}</h1>
                      </router-link>
                      <div class="source clearfix">
                          <div class="keywords lf" v-for="item in news.keywords" :key="item" >
                              <span>{{item}}</span>
                          </div>
                          <div class="comment_sum gt">
                              <span><img src="../assets/icon_comment.png">{{news.comment_sum}}</span>
                              <span><img src="../assets/icon_saw.png">{{news.look_sum}}</span>
                          </div>
                      </div>
                      <img :src="img+news.cover" class="cover">
                      <!-- <img src="../assets/1.jpg" class="cover"> -->
                  </li>
                  <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                      <span slot="no-more">
                          There is no more News :(
                      </span>
                  </infinite-loading>
              </ul>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "./blueheader";
import { onload, searchKeywords, hot } from "../api/example.js";
import InfiniteLoading from "vue-infinite-loading";
export default {
  name: "articleList",
  data() {
    return {
      img: "https://dev.apis.sh/PBX40wgC0/static/",
      channelpinyin: ["要闻", "社会", "军事", "科技", "娱乐"],
      channelname: ["yaowen", "shehui", "war", "tech", "ent"],
      me: "yaowen",
      changeColor:0,
      articledata: [],
      createTime: "",
      page: 2,
      keywords: "",
      key: "",
      noErr: false,
      hotnews: [],
      bestHot: "",
      disappeared: false
    };
  },
  components: {
    "app-header": Header,
    InfiniteLoading
  },
  methods: {
    // 页面加载数据/左侧导航栏
    getArt: function(pinyin1) {
      var vm = this;
      this.articledata = "";
      this.me = pinyin1;      
      onload(pinyin1, 1).then(res => {
        if (res.data.code === "success") {
          var data1 = res.data.data.news;
          vm.articledata = data1;
        } else {
          console.log(res.data.message);
        }
      });
    },
    // 转变时间戳截止到现在时间
    dateDiff: function(timestamp) {
      // 补全为13位
      var arrTimestamp = (timestamp + "").split("");
      for (var start = 0; start < 13; start++) {
        if (!arrTimestamp[start]) {
          arrTimestamp[start] = "0";
        }
      }
      timestamp = arrTimestamp.join("") * 1;

      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - timestamp;

      // 如果本地时间反而小于变量时间
      if (diffValue < 0) {
        return "不久前";
      }

      // 计算差异时间的量级
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;

      // 数值补0方法
      var zero = function(value) {
        if (value < 10) {
          return "0" + value;
        }
        return value;
      };

      // 使用
      if (monthC > 1) {
        // 超过1年，直接显示年月日
        return (function() {
          var date = new Date(timestamp);
          return (
            date.getFullYear() +
            "年" +
            zero(date.getMonth() + 1) +
            "月" +
            zero(date.getDate()) +
            "日"
          );
        })();
      } else if (weekC >= 1) {
        return parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        return parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        return parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        return parseInt(minC) + "分钟前";
      }
      return "刚刚";
    },
    // 关键字搜索
    search: function() {
      console.log(1);
      this.articledata = "";
      var vm = this;
      searchKeywords(vm.keywords, vm.page).then(res => {
        console.log(res.data);
        if (res.data.code === "success") {
          // console.log(res.data);
          var data1 = res.data.data.news;
          vm.articledata = data1;
        }
      });
    },
    // 懒加载
    onInfinite() {
      onload(this.me, this.page).then(res => {
        setTimeout(() => {
          if (res.data.code === "success") {
            console.log(res.data)
            this.articledata = this.articledata.concat(res.data.data.news);
          } else {
            console.log(res.data.message);
          }

          if (Math.ceil(res.data.data.counts / 4) === this.page) {
            this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
          } else {
            this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
            this.page++;
          }
        }, 1000);
      });
      // searchKeywords(this.key, this.page).then(res => {
      //   setTimeout(() => {
      //     if (res.data.code === "success" && res.data.data.news.length) {
      //       this.articledata = this.articledata.concat(res.data.data.news);
      //       if (Math.ceil(res.data.data.counts / 4) === this.page) {
      //         console.log("stop");
      //         // 停止加载
      //         this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
      //         console.log("末页");
      //       } else {
      //         // 继续加载
      //         this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
      //         this.page++;
      //         console.log("继续加载");
      //       }
      //     } else {
      //       //   没有搜索到数据或状态码返回错误
      //       this.$refs.infiniteLoading.$emit("$InfiniteLoading:complete");
      //       console.log(res.data.code);
      //       console.log("没有搜索到数据或状态码返回错误");
      //     }
      //   }, 1000);
      // });
    },
    // 热搜框
    insinte() {
      this.disappeared = true;
    },
    losed() {
      this.disappeared = false;
    },
    // 热搜按钮
    clickMe(key_a) {
      var vm = this;
      this.articledata = [];
      this.$router.push({
        name: "search",
        query: { key: key_a }
      });
      this.key = this.$route.query.key;
      this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset");
      this.bestHot = this.key;
    }
  },
   watched() {
      this.$refs.infiniteLoading.$emit("$InfiniteLoading:reset");
    },
  watch: {
      $router: "watched"
    },
  mounted() {
    hot().then(res => {
      this.hotnews = res.data.data.news;
      this.bestHot = "大家都在搜：" + res.data.data.news[0].title;
    });
    this.key = this.$route.query.key;
  }
};
</script>
<style scoped>
.articleList_content {
  background: #f9f9f9;
  padding: 60px 0 98px;
}
.inputMsg {
  position: relative;
  width: 520px;
}
.search {
  position: relative;
  width: 520px;
  overflow: hidden;
}
.search input {
  width: 520px;
  height: 48px;
  line-height: 48px;
  margin: 0 auto;
  border: 1px solid #ff8000;
  padding: 0 100px 0 24px;
  font-size: 14px;
  color: #9b9b9b;
}
.search .magnifier {
  position: absolute;
  top: -52px;
  right: -11px;
  width: 100px;
  height: 118px;
  border-radius: 50%;
  transform: rotate(-52deg);
  background: #ff8000;
  cursor: pointer;
}
.fangdajing {
  position: absolute;
  top: 59px;
  transform: rotate(52deg);
  right: 44.9px;
  width: 28px;
  height: 28px;
}
.hotNews .hotList {
  padding: 12px 0 12px 19.5px;
  font-size: 14px;
  color: #151515;
  cursor: pointer;
}
.hotNews li::before {
  margin-right: 12.1px;
  font-size: 14px;
  color: #9b9b9b;
}
.hotNews li:first-child::before {
  content: "1.";
  color: #ff0000;
}
.hotNews li:nth-child(2)::before {
  content: "2.";
  color: #ff6300;
}
.hotNews li:nth-child(3)::before {
  content: "3.";
  color: #ff8200;
}
.hotNews li:nth-child(4)::before {
  content: "4.";
}
.hotNews li:last-child::before {
  content: "5.";
}
.articleList_middle {
  margin-top: 43px;
  min-height: 300px;
}
.articleList_middle .left {
  position: fixed;
  width: 134px;
  margin-left: 150px;
  background: #fff;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
  padding: 1px 0;
}
.articleList_middle .left li {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 14px 0;
  font-size: 16px;
  color: #333333;
  cursor: pointer;
}
.articleList_middle .left .cgColor{  
  color: #ff8000;
  border-left: 5px solid #ff8000;
}
.articleList_middle .left li:hover {
  color: #ff8000;
  border-left: 5px solid #ff8000;
}
.articleList_middle .artlist {
  width: 726px;
  margin: 0 auto;
}
.artlist .list_li {
  position: relative;
  width: 726px;
  height: 300px;
  padding: 15.8px 77px 20.4px 138.3px;
  background: #fff;
  margin-bottom: 48px;
}
.artlist .list_li .howLong {
  position: absolute;
  top: -17.8px;
  left: -37.5px;
  width: 140px;
  height: 78px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  padding: 10.9px 20px 10.9px 15px;
  color: #9b9b9b;
}
.howLong p {
  font-size: 24px;
}
.howLong span {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  margin-top: 6.2px;
  font-size: 14px;
}
.list_li h1 {
  font-size: 24px;
  height: 1.5em;
  overflow: hidden;
  margin-bottom: 15.3px;
}
.source {
  margin-bottom: 14px;
}
.keywords span {
  font-size: 14px;
  color: #9b9b9b;
  margin-right: 10px;
}
.comment_sum span {
  font-size: 14px;
  margin-left: 23.8px;
  color: #9b9b9b;
}
.comment_sum span img {
  vertical-align: bottom;
  margin-right: 10px;
}
.list_li .cover {
  width: 418.6px;
  height: 184.5px;
}
.hotNews {
  position: absolute;
  top: 52px;
  left: 0;
  width: 520px;
  height: 216px;
  background: #ffffff;
  z-index: 5;
  box-shadow: -2px 0 3px 1px rgba(39, 52, 101, 0.08),
    2px 2px 3px 1px rgba(39, 52, 101, 0.08);
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
</style>
